<template>
  <div class="user-view-container">
    <div class="background-shapes">
      <div class="shape circle-1"></div>
      <div class="shape circle-2"></div>
      <div class="shape circle-3"></div>
      <div class="shape triangle"></div>
    </div>
    <div class="content-wrapper">
      <div v-if="!isLoggedIn" class="guest-view">
        <h1 class="welcome-title">欢迎访问用户中心</h1>
        <p class="welcome-subtitle">请登录或注册以访问您的个人信息</p>
        
        <div class="auth-buttons">
          <button class="login-btn" @click="navigateToLogin">登录</button>
          <button class="register-btn" @click="navigateToRegister">注册</button>
        </div>
        
        <div class="auth-cards">
          <div class="card login-card" @click="navigateToLogin">
            <div class="card-icon">
              <i class="fas fa-sign-in-alt"></i>
            </div>
            <h3>已有账号</h3>
            <p>登录您的账户</p>
          </div>
          
          <div class="card register-card" @click="navigateToRegister">
            <div class="card-icon">
              <i class="fas fa-user-plus"></i>
            </div>
            <h3>新用户</h3>
            <p>立即创建账户</p>
          </div>
        </div>
      </div>
      
      <div v-else class="user-profile">
        <div class="profile-header">
          <div class="avatar-container">
            <img src="/boy.png" class="user-avatar" alt="用户头像">
            <button class="edit-avatar-btn" @click="openAvatarEditor">
              <i class="fas fa-camera"></i>
            </button>
          </div>
          <h1 class="username">{{ user.name }}</h1>
          <p class="user-account">账号: {{ user.account }}</p>
        </div>
        
        <div class="profile-details">
          <div class="detail-card">
            <div class="detail-icon">
              <i class="fas fa-envelope"></i>
            </div>
            <div class="detail-content">
              <h3>邮箱</h3>
              <p>{{ user.bindEmail }}</p>
            </div>
          </div>
          
          <div class="detail-card">
            <div class="detail-icon">
              <i class="fas fa-phone"></i>
            </div>
            <div class="detail-content">
              <h3>手机号</h3>
              <p>{{ user.bindPhone }}</p>
            </div>
          </div>
          
          <div class="detail-card">
            <div class="detail-icon">
              <i class="fas fa-user-circle"></i>
            </div>
            <div class="detail-content">
              <h3>昵称</h3>
              <p>{{ user.name }}</p>
            </div>
          </div>
          
        </div>
        
        <div class="action-buttons">
          <button class="edit-btn" @click="navigateToEditProfile">
            <i class="fas fa-edit"></i> 修改个人信息
          </button>
          <button class="logout-btn" @click="logout">
            <i class="fas fa-sign-out-alt"></i> 退出登录
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { 
  selectById, 
  type User
} from '@/http/User';
import { useUserIdStore } from '@/stores/UserId';
import { message } from '@/utils/message';

const userIdStore = useUserIdStore();
const router = useRouter();

const user = ref<User>({
  account: null,
  id: null,
  name: null,
  createTime: null,
  updateTime: null,
  password: null,
  bindPhone: null,
  bindEmail: null,
  role: null,
  avatar: null
});

const isLoggedIn = ref(false);
const loading = ref(true);

const loadUserInfo = async () => {
  if (userIdStore.isAuthenticated && userIdStore.currentUserId) {
    try {
      console.log('🔄 刷新用户信息...');
      
      // 总是从服务器获取最新用户信息，确保数据同步
      const response = await selectById(userIdStore.currentUserId);
      
      if (response.data && response.data.account != null) {
        user.value = response.data;
        isLoggedIn.value = true;
        
        // 更新状态管理中的用户信息
        userIdStore.setUserInfo(response.data, 'RefreshUserInfo');
        
        console.log('✅ 用户信息已更新:', response.data);
        // 移除每次访问时的成功提示，只在控制台记录
        // message.success('用户信息已刷新');
      } else {
        isLoggedIn.value = false;
        message.warning('用户信息获取失败，请重新登录');
        userIdStore.logout();
      }
    } catch (error: any) {
      console.error('❌ 获取用户信息失败:', error);
      isLoggedIn.value = false;
      message.error('获取用户信息失败，请重新登录');
      userIdStore.logout();
    }
  } else {
    // 如果应用启动时没有恢复成功，再次尝试恢复
    console.log('⚠️ 用户状态为空，尝试恢复...');
    const restored = userIdStore.restoreFromStorage();
    
    if (restored && userIdStore.currentUserId) {
      // 恢复成功后，重新获取用户信息，并显示恢复提示
      console.log('✅ 状态恢复成功，重新获取用户信息');
      message.success('欢迎回来！');
      
      // 延迟一下再调用，避免立即递归
      setTimeout(() => {
        loadUserInfo();
      }, 100);
      return;
    } else {
      isLoggedIn.value = false;
      console.log('❌ 用户未登录');
    }
  }
  
  loading.value = false;
};

onMounted(async () => {
  // 检查用户状态（应用启动时已经恢复过了）
  await loadUserInfo();
});

const navigateToLogin = () => {
  router.push('/login');
};

const navigateToRegister = () => {
  router.push('/register');
};

const navigateToEditProfile = () => {
  router.push('/edit-profile');
};

const openAvatarEditor = () => {
  message.info('头像编辑功能开发中...');
};

const logout = () => {
  userIdStore.logout();
  isLoggedIn.value = false;
  message.success('您已成功退出登录');
  
  // 延迟跳转，让用户看到成功消息
  setTimeout(() => {
    router.push('/login');
  }, 1500);
};
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
.user-view-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.background-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.circle-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  top: -150px;
  right: -100px;
}

.circle-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
  bottom: -100px;
  left: -80px;
}

.circle-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #d4fc79, #96e6a1);
  top: 40%;
  left: 10%;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid rgba(255, 179, 186, 0.1);
  transform: rotate(45deg);
  bottom: -100px;
  right: 10%;
}

.content-wrapper {
  max-width: 1000px;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.content-wrapper:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* 访客视图样式 */
.guest-view {
  text-align: center;
  padding: 30px 0;
}

.welcome-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 10px;
  font-weight: 700;
}

.welcome-subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-bottom: 40px;
}

.auth-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}

.login-btn, .register-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-btn {
  background: linear-gradient(to right, #3498db, #1abc9c);
  color: white;
}

.register-btn {
  background: linear-gradient(to right, #9b59b6, #e74c3c);
  color: white;
}

.login-btn:hover, .register-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.auth-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.card {
  width: 280px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  padding: 30px 20px;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #3498db, #1abc9c);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 28px;
}

.login-card .card-icon {
  background: linear-gradient(135deg, #3498db, #1abc9c);
}

.register-card .card-icon {
  background: linear-gradient(135deg, #9b59b6, #e74c3c);
}

.card h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card p {
  color: #7f8c8d;
  font-size: 1.1rem;
}

.user-profile {
  padding: 20px 0;
}

.profile-header {
  text-align: center;
  margin-bottom: 40px;
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.user-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.edit-avatar-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3498db, #1abc9c);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.edit-avatar-btn:hover {
  transform: scale(1.1);
}

.username {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 5px;
}

.user-account {
  font-size: 1.2rem;
  color: #7f8c8d;
}

.profile-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.detail-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.detail-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: linear-gradient(135deg, #3498db, #1abc9c);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  margin-right: 20px;
  flex-shrink: 0;
}

.detail-content h3 {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin-bottom: 5px;
  font-weight: 600;
}

.detail-content p {
  font-size: 1.2rem;
  color: #2c3e50;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.edit-btn, .logout-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-btn {
  background: linear-gradient(to right, #3498db, #1abc9c);
  color: white;
}

.logout-btn {
  background: linear-gradient(to right, #e74c3c, #f39c12);
  color: white;
}

.edit-btn:hover, .logout-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 25px;
  }
  
  .welcome-title {
    font-size: 2rem;
  }
  
  .auth-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .auth-cards {
    flex-direction: column;
    align-items: center;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .profile-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 20px 15px;
  }
  
  .welcome-title {
    font-size: 1.8rem;
  }
  
  .card {
    width: 100%;
  }
}
</style>